<script setup lang="ts">
import { reactive } from 'vue'
import axios from 'axios'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'


// 弹窗关闭
const dialogVisible = ref(false)
const formType = ref('') // 表单的类型：create - 新增；update - 修改

const user = ref({
    id: '',
    username: '',
    password: '',
    nickname: '',
    remark: '',
    dept_id: '',
    post_ids: '',
    email: '',
    mobile: '',
    sex: ''
})
// 定义成功事件
const emit = defineEmits(['success'])

const onSubmit = async () => {
    if (formType.value == 'update'){
        await axios.put(`http://localhost:8080/users`,user.value).then(response =>{
        // console.log(response)        
      })
    }else{        
      await axios.post(`http://localhost:8080/users`,user.value).then(response =>{
                // console.log(response)        
            })
    }               
            dialogVisible.value = false
            restUser()
            emit('success')
}



const handleClose = (done: () => void) => { 
    dialogVisible.value = false
}

const open = async (type: string, id?: number) => {
    console.log(id)
    formType.value = type
    if(type =='update'){
        axios.get(`http://localhost:8080/users/`+id).then(response => {
            user.value= response.data
        })
    }
  dialogVisible.value = true
}
defineExpose({ open }) 



const restUser = () =>{    
    user.value = {
    id: '',
    username: '',
    password: '',
    nickname: '',
    remark: '',
    dept_id: '',
    post_ids: '',
    email: '',
    mobile: '',
    sex: ''
    }
    console.log(user.value)
}
</script>



<template>
    <el-dialog
    v-model="dialogVisible"
    title="新增用户"
    width="500"
    :before-close="handleClose"
  >   
        <el-form :model="user" label-width="auto" style="max-width: 600px">
            <el-form-item label="用户账号">
            <el-input v-model="user.username" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="user.password" />
            </el-form-item>
            <el-form-item label="用户昵称">
                <el-input v-model="user.nickname" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="user.remark" type="textarea" />
            </el-form-item>
            <el-form-item label="岗位">
                <el-select v-model="user.dept_id" placeholder="选择岗位">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="岗位编号数组">
                <el-input v-model="user.post_ids" />
            </el-form-item>
            <el-form-item label="用户邮箱">
                <el-input v-model="user.email" />
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="user.mobile" />
            </el-form-item>
            <el-form-item label="用户性别">
                <el-select v-model="user.dept_id" placeholder="选择性别">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>









            <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button @click="handleClose">Cancel</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  </template>
  
<style >
  
</style>